<template>
    <!-- 表格 -->
    <el-table
      stripe
      :data="datalist"
      highlight-current-row
      @row-click="showDetails"
      @selection-change="handleSelectionChange"
      row-class-name="link">
      <!-- 多选框 -->
      <el-table-column  type="selection" width="40"> </el-table-column>
      <!-- 站点 -->
      <el-table-column prop="site" :label="$I18n.site" min-width="50"></el-table-column>
       <!-- 订单号 -->
      <el-table-column prop="orderNo" :label="$I18n.orderNo" min-width="100"></el-table-column>
      <!-- 下单日期 -->
      <el-table-column prop="createdDate" :label="$I18n.createdDate"></el-table-column>
       <!-- 使用类型 -->
      <el-table-column prop="accountSource" :label="$I18n.accountSource"></el-table-column>
       <!-- 创建时间 -->
      <el-table-column prop="email" :label="$I18n.email"></el-table-column>
       <!-- 店铺名称 -->
      <el-table-column prop="shopName" :label="$I18n.shopName"></el-table-column>
       <!-- 产品负责人 -->
      <el-table-column prop="productBelongUser" :label="$I18n.productBelongUser"></el-table-column>
      <!-- 产品名称 -->
      <el-table-column prop="productName" :label="$I18n.productName"></el-table-column>
      <!-- assin -->
      <el-table-column prop="assin" :label="$I18n.assin"></el-table-column>
      <!-- 物流 -->
      <el-table-column prop="providerCompanyName" :label="$I18n.provider"></el-table-column>
      <!-- 佣金 -->
      <el-table-column prop="dueCommissionAmount" :label="$I18n.dueCommissionAmount"></el-table-column>
      <!-- 汇率 -->
      <el-table-column prop="exchangeRate" :label="$I18n.exchangeRate"></el-table-column>
       <!-- 操作用户 -->
      <el-table-column prop="optionUserName" :label="$I18n.optionUserName"></el-table-column>
       <!-- 订单 -->
      <el-table-column prop="orderStatus" :label="$I18n.status"></el-table-column>
    </el-table>
</template>

<script>
import INTERFACE from '../interface'
import EventBus from '@/services/eventBus'

export default {
  // tagsInfo：搜索条件，传给后端，获取表格数据
  props: ['tagsInfo'],
  data() {
    return {
      datalist: []        // 表格数据
    }
  },
  methods: {
    // 查看详情
    showDetails(row, column, event) {
      this.$router.push({
        path: '/orderUpdate',
        query: {orderId: row.orderId}
      })
    },
    // 多选框选中事件
    handleSelectionChange(rows) {
      let arr = []
      rows.forEach(v => { arr.push(v.orderId) })
      // 通知父组件
      this.$emit('selectBox', arr)
    }
  },
  mounted() {
  },
  watch: {
    tagsInfo: {
      handler(newValue) {
        // 根据搜索条件获取表格数据
        INTERFACE.getBusinessCheck(this.tagsInfo).then(res => {
          this.datalist = res.data.data || []
          // 通知分页组件总共条数
          EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
        }).catch(() => {
          this.datalist = []
        })
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="stylus">
</style>
